/** 指挥中心-研判列表 */
<template>
  <div style="width: 100%; height: 100%">
    <el-container class="home-qyda" v-if="showlist" v-loading="loading">
      <el-header class="header search-header">
        <el-form
          ref="ruleFormRef"
          class="between-form"
          :model="search"
          :inline="true"
        >
          <div style="flex: 1">
            <el-form-item label="事件类型" prop="eventCode">
              <el-select
                v-model="search.eventCode"
                placeholder="请选择"
                style="min-width: 120px"
                clearable
                filterable
              >
                <el-option
                  v-for="item in typeState.sjlx"
                  :key="item.value"
                  :label="item.key"
                  :value="item.value"
                />
              </el-select>
            </el-form-item>

            <el-form-item label="所属社区" prop="orgId">
              <el-select
                v-model="search.orgId"
                placeholder="请选择"
                style="min-width: 120px"
                clearable
                filterable
              >
                <el-option
                  v-for="item in typeState.sssq"
                  :key="item.orgId"
                  :label="item.orgName"
                  :value="item.orgId"
                />
              </el-select>
            </el-form-item>
            <el-form-item label="事件等级" prop="eventClass">
              <el-select
                v-model="search.eventClass"
                placeholder="请选择"
                style="min-width: 120px"
                clearable
                filterable
              >
                <el-option
                  v-for="item in typeState.sjdj"
                  :key="item.value"
                  :label="item.key"
                  :value="item.value"
                />
              </el-select>
            </el-form-item>
            <el-form-item label="研判状态" prop="eventStatus">
              <el-select
                v-model="search.eventStatus"
                placeholder="是否研判"
                style="min-width: 120px"
                clearable
              >
                <el-option label="全部" value=""></el-option>
                <el-option label="已研判" value="1"></el-option>
                <el-option label="待研判" value="0"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="研判结果" prop="judgeResult">
              <el-select
                v-model="search.judgeResult"
                placeholder="请选择研判结果"
                style="min-width: 120px"
                clearable
              >
                <el-option label="全部" value=""></el-option>
                <el-option label="正报" value="1"></el-option>
                <el-option label="误报" value="2"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="上报时间" prop="eventTime">
              <el-date-picker
                style="width: 340px"
                v-model="search.eventTime"
                type="datetimerange"
                start-placeholder="开始时间"
                end-placeholder="结束时间"
                @change="handleEventTimeChange"
              />
            </el-form-item>
            <el-form-item label="研判时间" prop="assessTime">
              <el-date-picker
                style="width: 340px"
                v-model="search.assessTime"
                type="datetimerange"
                start-placeholder="开始时间"
                end-placeholder="结束时间"
                @change="handleAssessTimeChange"
              />
            </el-form-item>
          </div>
          <div style="width: 250px">
            <el-form-item>
              <el-button
                type="primary"
                class="search-btn"
                @click="getSearch(ruleFormRef)"
              >
                查询
              </el-button>
              <el-button @click="reset(ruleFormRef)" class="reset-btn"
                >重置</el-button
              >
            </el-form-item>
          </div>
        </el-form>
      </el-header>
      <el-main>
        <el-container>
          <el-main>
            <el-container>
              <el-main class="container bc-table">
                <el-table
                  :data="objecInfo.tableData"
                  style="width: 100%; height: 100%"
                  @selectionChange="changeSelect"
                  row-key="busizEventId"
                >
                  <el-table-column type="selection" width="55" />
                  <!-- <el-table-column prop="reportTime" label="事件缩略图">
                    <template #default="scope">
                      <img
                        style="width: 100px; height: 40px"
                        :src="scope.row.eventPic"
                      />
                    </template>
                  </el-table-column> -->
                  <el-table-column prop="id" label="事件编号" />
                  <el-table-column prop="address" label="事件地址" />
                  <el-table-column prop="eventCodeDesc" label="事件类型" />
                  <el-table-column prop="orgIdDesc" label="所属社区" />
                  <el-table-column prop="eventStatusDesc" label="研判状态">
                    <!-- <template #default="scope">
                      <span
                        v-if="scope.row.eventStatus == '0'"
                        >{{ scope.row.eventStatusDesc }}</span
                      >
                      <span
                        style="color: #21adff"
                        v-else-if="scope.row.eventStatus == '10'"
                        >{{ scope.row.eventStatusDesc }}</span
                      >
                      <span
                        style="color: #2aba77"
                        v-else-if="scope.row.eventStatus == '99'"
                        >{{ scope.row.eventStatusDesc }}</span
                      >
                       <span
                        v-else
                        >{{ scope.row.eventStatusDesc }}</span
                      >
                    </template> -->
                    <template #default="scope">
                      <span
                        class="level w"
                        v-if="scope.row.eventStatus == '0'"
                        >{{ scope.row.eventStatusDesc }}</span
                      >
                      <span
                        class="level"
                        v-else-if="scope.row.eventClassDesc == '1'"
                        >{{ scope.row.eventStatusDesc }}</span
                      >
                      <span class="level" v-else>{{
                        scope.row.eventStatusDesc
                      }}</span>
                    </template>
                  </el-table-column>
                  <el-table-column prop="eventClassDesc" label="事件等级">
                    <template #default="scope">
                      <span
                        class="level z"
                        v-if="scope.row.eventClassDesc == '重点'"
                        >重点</span
                      >
                      <span
                        class="level w"
                        v-else-if="scope.row.eventClassDesc == '紧急'"
                        >紧急</span
                      >
                      <span class="level" v-else>普通</span>
                    </template>
                  </el-table-column>
                  <el-table-column prop="judgeResultDesc" label="研判结果">
                    <template #default="scope">
                      <span
                        class="level b"
                        v-if="scope.row.judgeResultDesc == '正报'"
                        >正报</span
                      >
                      <span
                        class="level z"
                        v-if="scope.row.judgeResultDesc == '误报'"
                        >误报</span
                      >
                      <span class="level" v-if="scope.row.eventStatus == '0'">{{
                        "--"
                      }}</span>
                    </template>
                  </el-table-column>
                  <el-table-column prop="reportTime" label="上报时间">
                    <template #default="scope">
                      <span>{{ scope.row.reportTime || "--" }}</span>
                    </template>
                  </el-table-column>
                  <el-table-column prop="judgeTime" label="研判时间">
                    <template #default="scope">
                      <span>{{ scope.row.judgeTime || "--" }}</span>
                    </template>
                  </el-table-column>
                  <el-table-column label="操作">
                    <template #default="scope">
                      <el-button
                        link
                        type="primary"
                        size="small"
                        @click="seedetail(scope.row)"
                        v-if="scope.row.eventStatus == '0'"
                      >
                        研判
                      </el-button>
                      <el-button
                        link
                        type="primary"
                        size="small"
                        @click="seedetail(scope.row)"
                        v-if="scope.row.eventStatus == '1'"
                      >
                        详情
                      </el-button>
                      <!-- 未研判--能删除 -->
                      <el-button
                        link
                        type="primary"
                        size="small"
                        v-if="scope.row.eventStatus == '0'"
                        @click="deleteRow(scope.row.id)"
                        >删除</el-button
                      >
                    </template>
                  </el-table-column>
                </el-table>
              </el-main>
              <el-footer class="footer mt20">
                <el-pagination
                  v-model:current-page="tableField.pageNo"
                  v-model:page-size="tableField.pageSize"
                  :page-sizes="[10, 20, 30, 50, 100]"
                  layout="total,sizes, prev, pager, next, jumper"
                  :total="total"
                  :background="true"
                  @size-change="handleSizeChange"
                  @current-change="handleCurrentChange"
                  prev-text="上一页"
                  next-text="下一页"
                />
              </el-footer>
            </el-container>
          </el-main>
        </el-container>
      </el-main>
    </el-container>
    <!-- 删除 -->
    <SelfDialog
      :dialogVisable="dialogVisable"
      height="320px"
      title="提示"
      @close="close"
      @confirm="confirm"
    >
      <template #default>
        <div class="center_content">
          <img class="icon-img" src="../../assets/images/gth.png" />
          <p class="text">是否确认删除，删除后无法撤回</p>
        </div>
      </template>
    </SelfDialog>
  </div>
</template>

<script setup>
import { ElMessage } from "element-plus";
import { onMounted, ref, reactive, watch } from "vue";
import { getyanqianlistData, judgedelete } from "@/api/zhzx";
import { Minxfun } from "@/utils/minxin";
import SelfDialog from "@/components/dialog/dialog.vue";

import { TypeMin } from "@/utils/type.js";

const { typeState } = TypeMin();

import { TabbarList } from "@/pinia/tabbar.js";
let piniaTab = TabbarList();
import dayjs from "dayjs";

const {
  handleSizeChange,
  handleCurrentChange,
  tableField,
  total,
  loading,
  formatDateTime,
} = Minxfun();
import { useUserStore } from "@/pinia/user.js";
const piniaUser = useUserStore();

const ruleFormRef = ref();
const search = reactive({
  eventCode: "",
  eventStatus: "0", //研判状态，默认查待研判0
  eventClass: "",
  eventTime: [], //上报时间
  assessTime: [], //研判时间
  judgeResult: "", //研判结果
  deviceId: "",
  orgId: "",
  assignedMemberId: "",
  handleTime: "",
  eventSource: "",
});

let selected = ref([]);

const changeSelect = (rows) => {
  selected.value = rows;
};

onActivated(() => {
  // 组件激活时重新获取数据
  getTableData();
});

onMounted(() => {
  // getType();
  getTableData();
});

// 获取部门
let doorList = ref([]);
let sortList = ref([]);
const getType = async () => {
  try {
    let res1 = await industrycategory();
    sortList.value = res1.data;
  } catch (e) {
    console.log(e);
  }
};

const getSearch = () => {
  if (tableField.value.pageNo == 1) {
    getTableData();
  } else {
    tableField.value.pageNo = 1;
    getTableData();
  }
};

const reset = (ruleFormRef) => {
  search.eventStatus = "0";
  ruleFormRef.resetFields();
  // 确保 eventTime 和 assessTime 初始化为 []
  search.eventTime = [];
  search.assessTime = [];
  getTableData();
};

watch(
  tableField,
  (newVal, oldVal) => {
    getTableData();
  },
  { deep: true }
);
let objecInfo = reactive({
  tableData: [],
});
const handleEventTimeChange = (value) => {
  if (value === null) {
    // 清空时重置为 []
    search.eventTime = [];
  } else {
    search.eventTime = value;
  }
  // 重新加载数据
  getTableData();
};

const handleAssessTimeChange = (value) => {
  if (value === null) {
    // 清空时重置为 []
    search.assessTime = [];
  } else {
    search.assessTime = value;
  }
  // 重新加载数据
  getTableData();
};

const getTableData = async () => {
  try {
    loading.value = true;

    // 确保 eventTime 和 assessTime 是数组类型（默认为 []）
    search.eventTime = search.eventTime || [];
    search.assessTime = search.assessTime || [];
    let obj = {
      ...tableField.value,
      ...search,
      pageNum: tableField.value.pageNo,
      startDate:
        search.eventTime.length > 0
          ? dayjs(search.eventTime[0]).format("YYYY-MM-DD HH:mm:ss")
          : "",
      endDate:
        search.eventTime.length > 0
          ? dayjs(search.eventTime[1]).format("YYYY-MM-DD HH:mm:ss")
          : "",
      judgeStartDate:
        search.assessTime.length > 0
          ? dayjs(search.assessTime[0]).format("YYYY-MM-DD HH:mm:ss")
          : "",
      judgeEndDate:
        search.assessTime.length > 0
          ? dayjs(search.assessTime[1]).format("YYYY-MM-DD HH:mm:ss")
          : "",
    };
    console.log("查询的参数", obj);
    let { data } = await getyanqianlistData(obj);
    loading.value = false;
    objecInfo.tableData = data.reportList;
    total.value = Number(data.total) || 0;
  } catch (e) {
    loading.value = false;
    console.error(e);
  }
};

let currentRow = ref(null);
let showDetail = ref(false);
const handleClick = (value) => {
  currentRow.value = value;
  showDetail.value = true;
};

// 删除
let dialogVisable = ref(false);
let deletEventId = ref("");
const deleteRow = (value) => {
  try {
    dialogVisable.value = true;
    deletEventId.value = value;
  } catch (e) {
    console.error(e);
  }
};

// 取消删除
const close = () => {
  dialogVisable.value = false;
};

// 确认删除
const confirm = async () => {
  try {
    let { data } = await judgedelete({
      eventId: deletEventId.value,
    });
    ElMessage({
      message: "删除成功",
      type: "success",
    });
    getTableData();
    dialogVisable.value = false;
  } catch (e) {
    console.error(e);
  }
};

// 导出
const saveExport = async () => {
  try {
    // exportVisable.value = false;
    console.log(fieldList.value);
    let params = {
      objectId: currentTab.value,
      queryOptions: searchData.value,
      orderBys: sortList.value,
      selectItems: fieldList.value.map((item) => item.props),
    };
    let config = {
      headers: {
        "Content-Type": "application/json;charset=UTF-8",
        "Access-Control-Allow-Origin": true,
        withCredentials: true,
        "Access-Control-Expose-Headers": "Authorization",
      },
      responseType: "blob",
    };
    axios
      .post("/data-center/query/composite/export", params, config)
      .then((res) => {
        window.open(res.data.data.fileUrl);
        // const content = res.data;
        // const blob = new Blob([content]);
        // const fileName =
        //   decodeURI(
        //     res.headers["content-disposition"].split(";")[1].split("=")[1]
        //   ) || "文件.xlsx";
        // if ("download" in document.createElement("a")) {
        //   // 非IE下载
        //   const elink = document.createElement("a");
        //   elink.download = fileName;
        //   elink.style.display = "none";
        //   elink.href = URL.createObjectURL(blob);
        //   document.body.appendChild(elink);
        //   elink.click();
        //   URL.revokeObjectURL(elink.href); // 释放URL 对象
        //   document.body.removeChild(elink);
        // } else {
        //   // IE10+下载
        //   navigator.msSaveBlob(blob, fileName);
        // }
      });
  } catch (e) {}
};

const seedetail = (row) => {
  console.log("sssssssssss", row);
  piniaTab.add({
    name: "事件详情",
    path: "/ypdetail",
    icon: "",
    query: {
      busizEventId: row.id,
    },
    meta: {
      hidden: false,
      title: "",
    },
  });
};

// 展示详情
let showlist = ref(true);
let currentData = ref(null);
const changeStatus = (value) => {
  if (value) {
    currentData.value = value;
  } else {
    currentData.value = null;
  }
  showlist.value = !showlist.value;
};
</script>

<style lang="scss" scoped>
.home-qyda {
  width: 100%;
  height: 100%;
  .header {
    min-height: 36px;
    line-height: 36px;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    box-sizing: border-box;
    overflow: hidden;
    margin-bottom: 18px;
    .header-l {
      display: flex;
      align-items: center;
      .text {
        font-family: PingFangSC, PingFang SC;
        font-weight: 600;
        font-size: 16px;
        color: #333333;
        line-height: 22px;
        letter-spacing: 1px;
        text-align: left;
        padding-left: 14px;
      }
    }
  }
}
.el-container {
  height: 100% !important;
  padding: 0 !important;
}
.el-header {
  height: auto !important;
  min-height: 36px !important;
}
.el-main {
  padding: 0 !important;
}
.search {
  margin: 0 50px;
}
.header-r {
  font-family: PingFangSC, PingFang SC;
  font-weight: 500;
  font-size: 14px;
  color: #666666;
}
</style>

<style lang="scss">
.el-form-item__label {
  font-family: PingFangSC, PingFang SC;
  font-weight: 500;
  font-size: 14px;
  color: #333333;
}
.self_btns {
  color: #2263bf !important;
}
.level {
  display: inline-block;
  text-align: center;
  width: 60px;
  height: 26px;
  background: #e7f6ff;
  border-radius: 4px;
  border: 1px solid rgba(47, 173, 255, 0.32);
  font-family: PingFangSC, PingFang SC;
  font-weight: 400;
  font-size: 14px;
  color: #21adff;
  line-height: 26px;
  &.w {
    background: #ffe6e6;
    color: #ff2121;
    border: 1px solid rgba(255, 47, 47, 0.32);
  }
  &.z {
    background: #fff4e8;
    color: rgba(255, 160, 47, 1);
    border: 1px solid rgba(255, 160, 47, 0.32);
  }
  // &.b {
  //   background: rgb(33, 173, 255);
  //   color: rgb(33, 173, 255,0.1);
  //   border: 1px solid rgba(255, 160, 47, 0.32);
  // }
}
</style>
